<template>
  <div>
    <div class="search-container">
      <el-select
        v-model="course"
        value-key="name"
        placeholder="请选择课程"
        @change="clearLaboratory"
      >
        <el-option
          v-for="(item, index) in courseList"
          :key="index"
          :value="item"
          :label="item.name"
        ></el-option>
      </el-select>
      <el-button
        class="search-btn"
        type="primary"
        icon="el-icon-search"
        :disabled="!course.name"
        @click="searchLab"
      >
        搜索实验室
      </el-button>
    </div>
    <div class="course-card">
      <h3>课程详情：</h3>
      <br />
      课程名：{{ course.name }}
      <br />
      课时：{{ course.time }}
      <br />
      课程人数：{{ course.number }}
    </div>

    <br />
    <br />
    <div v-if="labFlag" class="search-container">
      <el-select
        v-model="laboratory"
        value-key="name"
        placeholder="请选择实验室"
        @change="clearTable"
      >
        <el-option
          v-for="(item, index) in laboratoryList"
          :key="index"
          :value="item"
          :label="item.name"
        ></el-option>
      </el-select>
      <el-button
        class="search-btn"
        type="primary"
        icon="el-icon-search"
        :disabled="!laboratory.name"
        @click="searchAppointment"
      >
        开始预约
      </el-button>
    </div>

    <div class="lab-container" v-if="searchFlag">
      <div class="table-title">
        {{ laboratory.name }}实验室详情：
        <br />
        实验室容纳人数：{{ laboratory.number }}
      </div>

      <table>
        <tr>
          <td>课节/星期</td>
          <td>星期一</td>
          <td>星期二</td>
          <td>星期三</td>
          <td>星期四</td>
          <td>星期五</td>
          <td>星期六</td>
          <td>星期日</td>
        </tr>
        <tr>
          <td>第一节</td>
          <td v-for="(day, dayIndex) in booking[0]" :key="dayIndex">
            <div class="occuption-detail">
              <div v-for="(week, weekIndex) in day" :key="weekIndex">
                {{ week == 1 ? `${weekIndex + 1} ,` : "" }}
              </div>
            </div>
            <el-button
              type="primary"
              icon="el-icon-edit"
              circle
              @click="selectWeek(0, dayIndex)"
            ></el-button>
          </td>
        </tr>
        <tr>
          <td>第二节</td>
          <td v-for="(day, dayIndex) in booking[1]" :key="dayIndex">
            <div class="occuption-detail">
              <div v-for="(week, weekIndex) in day" :key="weekIndex">
                {{ week == 1 ? `${weekIndex + 1} ,` : "" }}
              </div>
            </div>
            <el-button
              type="primary"
              icon="el-icon-edit"
              circle
              @click="selectWeek(1, dayIndex)"
            ></el-button>
          </td>
        </tr>
        <tr>
          <td>第三节</td>
          <td v-for="(day, dayIndex) in booking[2]" :key="dayIndex">
            <div class="occuption-detail">
              <div v-for="(week, weekIndex) in day" :key="weekIndex">
                {{ week == 1 ? `${weekIndex + 1} ,` : "" }}
              </div>
            </div>
            <el-button
              type="primary"
              icon="el-icon-edit"
              circle
              @click="selectWeek(2, dayIndex)"
            ></el-button>
          </td>
        </tr>
        <tr>
          <td>第四节</td>
          <td v-for="(day, dayIndex) in booking[3]" :key="dayIndex">
            <div class="occuption-detail">
              <div v-for="(week, weekIndex) in day" :key="weekIndex">
                {{ week == 1 ? `${weekIndex + 1} ,` : "" }}
              </div>
            </div>
            <el-button
              type="primary"
              icon="el-icon-edit"
              circle
              @click="selectWeek(3, dayIndex)"
            ></el-button>
          </td>
        </tr>
        <tr>
          <td>第五节</td>
          <td v-for="(day, dayIndex) in booking[4]" :key="dayIndex">
            <div class="occuption-detail">
              <div v-for="(week, weekIndex) in day" :key="weekIndex">
                {{ week == 1 ? `${weekIndex + 1} ,` : "" }}
              </div>
            </div>
            <el-button
              type="primary"
              icon="el-icon-edit"
              circle
              @click="selectWeek(4, dayIndex)"
            ></el-button>
          </td>
        </tr>
      </table>
      <div class="btn-container">
        <el-button @click="dialogVisible = true" type="info" round>
          提交预约
        </el-button>
      </div>
    </div>
    <el-drawer title="选择周数" v-model="drawer" :with-header="false">
      <div class="drawer-title">选择周数：</div>
      <div class="drawer-content">
        <el-checkbox
          class="drawer-item"
          v-for="(item, index) in weeks"
          :key="index"
          v-model="booking[lesson][day][index]"
          :label="`第${index + 1}周`"
          :true-label="1"
          :false-label="0"
          :disabled="item"
          border
        ></el-checkbox>
      </div>
    </el-drawer>
    <el-dialog
      title="提示"
      v-model="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <span>确认提交预约</span>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="commit">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script lang="ts">
import { Appointment, Course, Laboratory } from "@/datasource/Type";
import { State } from "@/store";
import {
  ADD_APPOINTMENT,
  GET_LAB_APPOINTMENT,
  LIST_COURSE,
  SEARCHELAB,
} from "@/store/VuexTypes";
import { computed, defineComponent, ref } from "vue";
import { useStore } from "vuex";

export default defineComponent({
  setup() {
    const drawer = ref(false);
    const dialogVisible = ref(false);
    const booking = ref([
      [
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      ],
      [
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      ],
      [
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      ],
      [
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      ],
      [
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      ],
    ]);
    const course = ref<Course>({});
    const laboratory = ref<Laboratory>({});
    const labFlag = ref(false);
    const searchFlag = ref(false);
    const store = useStore<State>();
    store.dispatch(LIST_COURSE);
    const courseList = computed(() => store.state.courseList);
    const laboratoryList = computed(() => store.state.laboratoryList);
    const appointmentList = computed(() => store.state.appointmentList);
    const searchLab = () => {
      //console.log(course.value);
      const cid = course.value.id;
      store.dispatch(SEARCHELAB, cid);
      labFlag.value = true;
      laboratory.value = {};
      //
    };
    const searchAppointment = () => {
      //console.log(laboratory.value);
      searchFlag.value = true;
      const lid = laboratory.value.id;
      //console.log(lid);
      store.dispatch(GET_LAB_APPOINTMENT, lid);
      console.log(lid);
    };
    const clearLaboratory = () => {
      laboratory.value = {};
      labFlag.value = false;
      searchFlag.value = false;
    };
    const clearTable = () => {
      searchFlag.value = false;
    };
    const lesson = ref(0);
    const day = ref(0);
    const weeks = ref([
      false,
      false,
      false,
      false,
      false,
      false,
      false,
      false,
      false,
      false,
      false,
      false,
      false,
      false,
      false,
      false,
      false,
      false,
    ]);
    const selectWeek = (lessonIndex: number, dayIndex: number) => {
      weeks.value = [
        false,
        false,
        false,
        false,
        false,
        false,
        false,
        false,
        false,
        false,
        false,
        false,
        false,
        false,
        false,
        false,
        false,
        false,
      ];
      lesson.value = lessonIndex;
      day.value = dayIndex;
      console.log(lesson.value, day.value);
      appointmentList.value.forEach((a) => {
        if (a.lesson == lesson.value + 1 && a.day == day.value + 1) {
          if (a.weeks) {
            a.weeks.forEach((index) => {
              weeks.value[index - 1] = true;
            });
          }
        }
      });
      console.log(weeks.value);
      drawer.value = true;
    };
    const commit = () => {
      const List: Appointment[] = [];
      console.log(booking.value);
      booking.value.forEach((l, lIndex) => {
        l.forEach((d, dIndex) => {
          const element: Appointment = {
            lesson: lIndex + 1,
            day: dIndex + 1,
            weeks: [],
          };
          d.forEach((w, wIndex) => {
            if (w == 1) {
              element.weeks?.push(wIndex + 1);
            }
          });

          if (element.weeks && element.weeks?.length > 0) {
            List.push(element);
          }
        });
      });
      console.log(List);
      store.dispatch(ADD_APPOINTMENT, {
        cid: course.value.id,
        lid: laboratory.value.id,
        appointmentList: List,
      });
      dialogVisible.value = false;
    };
    return {
      lesson,
      day,
      weeks,
      courseList,
      course,
      searchLab,
      laboratory,
      laboratoryList,
      searchAppointment,
      searchFlag,
      labFlag,
      clearLaboratory,
      clearTable,
      appointmentList,
      booking,
      drawer,
      selectWeek,
      commit,
      dialogVisible,
    };
  },
});
</script>
<style scoped>
.search-btn {
  margin-left: 20px;
}
.search-container {
  width: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.lab-container {
  width: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 20px;
}
table {
  border: 1px solid #ccc;
  border-collapse: collapse;
}
td {
  border: 1px solid #ccc;
  width: 100px;
  height: 150px;
  text-align: center;
}
.occuption-detail {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  font-size: 10px;
  padding: 5px 10px;
  text-align: justify;
  color: grey;
}
.table-title {
  width: 100%;
  text-align: center;
  margin-bottom: 10px;
}
.drawer-title {
  width: 100%;
  margin-top: 50px;
  font-size: 18px;
  font-weight: 800;
  text-align: center;
}
.drawer-content {
  padding-top: 30px;
  padding-left: 50px;
}
.drawer-item {
  margin: 15px;
}
.btn-container {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 50px;
  margin-bottom: 70px;
}
.course-card {
  width: 400px;
  padding: 20px;
  margin: 20px auto;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 5px 5px 5px #ccc;
}
.course-card h3 {
  text-align: center;
}
</style>
